<template>
  <el-card class="management-card">
    <template #header>
      <div class="card-header">
        <span>学生精细化管理看板</span>
        <el-tag type="info">实时更新</el-tag>
      </div>
    </template>

    <!-- 过滤条件 -->
    <div class="filter-group">
      <el-select v-model="viewMode" size="small" @change="refreshDashboard">
        <el-option label="全院视角" value="college" />
        <el-option label="年级视角" value="grade" />
        <el-option label="班级视角" value="class" />
      </el-select>
      <el-date-picker
        v-model="timeRange"
        type="monthrange"
        size="small"
        @change="refreshDashboard"
      />
    </div>

    <!-- 图表 -->
    <div id="managementDashboard" style="height: 380px;"></div>
    
    <!-- 数据摘要 -->
    <div class="data-summary">
      <div class="summary-item">
        <div class="label">重点关注</div>
        <div class="value danger">{{ focusStudents }}人</div>
      </div>
      <div class="summary-item">
        <div class="label">学业预警</div>
        <div class="value warning">{{ warningStudents }}人</div>
      </div>
      <div class="summary-item">
        <div class="label">进步显著</div>
        <div class="value success">{{ improvedStudents }}人</div>
      </div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ManagementDashboard',
  data() {
    return {
      viewMode: 'college',
      timeRange: [new Date(2025, 0), new Date()],
      chart: null
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('managementDashboard'))
      const option = {
        // 图表配置
      }
      this.chart.setOption(option)
    },
    refreshDashboard() {
      this.initChart()
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>